<template>
	<view class="nav_component">
		<view class="nav">
			<!-- 全部 -->
			<view class="all" @click="change_all_color" :class="{active: sel == 0}">
				<text>全</text><text>部</text>
			</view>
			<!-- 其他选项 -->
			<view class="option">
				<text :class="{active: item.id == sel}" v-for="(item, index) in options" :key="index"
					@click="select(item)">{{item.classify}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "nav_component",
		data() {
			return {
				sel: 0
			};
		},
		props: ['options'],
		methods: {
			select(item) {
				this.sel = item.id
				this.$emit('SEL', this.sel)
			},
			change_all_color() {
				this.sel = 0
				this.$emit('SEL', this.sel)
			}
		},
	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.active {
		color: red;
	}

	.nav {
		display: flex;
		color: #646467;
		background-color: #f9f9f9;

		// height: 100px;
		.active {
			color: red;
		}

		.all {
			display: flex;
			font-size: 13px;
			padding-right: 20rpx;
			padding-top: 22rpx;
		}

		.option {
			display: flex;
			height: 100px;
			// text-align: center;
			flex-wrap:wrap;
			text {
				padding: 20rpx 15rpx;
				font-size: 13px;
			}
		}
	}
</style>
